<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>boot-project后台管理系统</title>
  <link rel="icon" th:href="@{/static/favicon.ico}" type="image/x-icon">

  <!-- 页面加载进度动画 -->
  <script th:src="@{/static/lib/pace-progress/pace.js}"></script>
  <link rel="stylesheet" th:href="@{/static/lib/pace-progress/themes/blue/pace-theme-flash.css}"/>
  <!-- Daterange picker -->
  <link rel="stylesheet" th:href="@{/static/lib/daterangepicker/daterangepicker.css}"/>
  <link rel="stylesheet" th:href="@{/static/lib/fontawesome-free/css/all.css}"/>
  <link rel="stylesheet" th:href="@{/static/lib/adminlte/css/adminlte.min.css}"/>
  <link rel="stylesheet" th:href="@{/static/lib/bootstrap-table/css/bootstrap-table.min.css}"/>
  <link rel="stylesheet" th:href="@{/static/lib/icheck-bootstrap/icheck-bootstrap.css}"/>
  <link rel="stylesheet" th:href="@{/static/lib/uploader/css/webuploader.css}"/>
  <link rel="stylesheet" th:href="@{/static/lib/ztree/css/ztree-bootstrap.css}"/>
  <link rel="stylesheet" th:href="@{/static/lib/fontawesome-iconpicker/css/fontawesome-iconpicker.min.css}"/>

  <link rel="stylesheet" th:href="@{/static/css/admin.css}"/>

</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed" onhashchange="handleHashChange()">
<div class="wrapper">

  <!-- 顶部导航栏 -->
  <div th:replace="/fragments/navbar :: navbar"></div>

  <!-- 主侧边栏容器 -->
  <div th:replace="/fragments/sidebar :: sidebar(${menuTree})"></div>

  <!-- 页面内容包装器 开始 -->
  <!-- 根据URL的hash值(#号后面的值)动态刷新内容区域 -->
  <div class="content-wrapper text-sm" id="content">
    <!-- 内容标题（页面标题）开始 -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Dashboard</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Dashboard</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!-- 主内容 结束 -->
  </div>
  <!-- 页面内容包装器 结束 -->

  <!-- 控制侧栏 开始 -->
  <aside class="control-sidebar control-sidebar-dark">

  </aside>
  <!-- 控制侧栏 结束 -->

  <!-- 页脚区域 -->
  <div th:replace="/fragments/footer :: footer"></div>
</div>

<!--修改密码的模态框-->
<section id="formModalWrapper">
  <div class="modal fade" id="formModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="formTitle">修改密码</h5>
          <button type="button" class="close" data-dismiss="modal" th:if="${!firstLogin}">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div th:if="${firstLogin}" style="margin-bottom: 16px;">系统检测到您是首次登录，请修改密码</div>
          <form id="passwordForm">
            <div class="form-group row" th:if="${!firstLogin}">
              <label for="oldPassword" class="col-sm-2 col-form-label">原密码</label>
              <div class="col-sm-10">
                <input type="password" name="oldPassword" class="form-control" id="oldPassword"
                       placeholder="请填写原密码" th:attr="required=${!firstLogin ? 'required' : null}">
                <div class="invalid-feedback">请填写原密码</div>
              </div>
            </div>
            <div class="form-group row">
              <label for="newPassword" class="col-sm-2 col-form-label">新密码</label>
              <div class="col-sm-10">
                <input type="password" name="newPassword" class="form-control" id="newPassword"
                       placeholder="请填写新密码" required>
                <div class="invalid-feedback">请填写新密码</div>
              </div>
            </div>
            <div class="form-group row">
              <label for="confirmPassword" class="col-sm-2 col-form-label">确认密码</label>
              <div class="col-sm-10">
                <input type="password" name="confirmPassword" class="form-control" id="confirmPassword"
                       placeholder="请确认新密码" required>
                <div class="invalid-feedback">请确认新密码</div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" th:if="${!firstLogin}">取消</button>
          <button type="button" class="btn btn-primary" id="editPasswordBtn"
                  th:onclick="changePassword([[${firstLogin}]])">保存</button>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- REQUIRED SCRIPTS -->

<!-- jQuery -->
<script th:src="@{/static/lib/jquery/jquery.min.js}"></script>
<!-- moment -->
<script th:src="@{/static/lib/moment/moment.min.js}"></script>
<!-- daterangepicker -->
<script th:src="@{/static/lib/daterangepicker/daterangepicker.js}"></script>
<!-- jQuery UI 1.11.4 -->
<script th:src="@{/static/lib/jquery-ui/jquery-ui.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/static/lib/bootstrap/js/bootstrap.bundle.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/static/lib/adminlte/js/adminlte.min.js}"></script>
<script th:src="@{/static/lib/adminlte/js/demo.js}"></script>
<!-- Bootstrap Table -->
<script th:src="@{/static/lib/bootstrap-table/js/bootstrap-table.min.js}"></script>
<script th:src="@{/static/lib/bootstrap-table/js/bootstrap-table-zh-CN.min.js}"></script>
<!-- uploader -->
<script th:src="@{/static/lib/uploader/js/webuploader.js}"></script>
<script th:src="@{/static/lib/uploader/js/jax.uploader.js}"></script>
<script th:src="@{/static/lib/uploader/js/uploadCall.js}"></script>
<!-- layer -->
<script th:src="@{/static/lib/layer/layer.js}"></script>
<!-- ztree -->
<script th:src="@{/static/lib/ztree/js/jquery.ztree.all.min.js}"></script>
<!-- iconpicker -->
<script th:src="@{/static/lib/fontawesome-iconpicker/js/fontawesome-iconpicker.min.js}"></script>

<script th:src="@{/static/js/core.js}"></script>

<!-- 声明项目上下文路径 -->
<script type="text/javascript" th:inline="javascript">
  ctx = /*[[@{/}]]*/ '';
</script>
<script type="text/javascript" th:inline="javascript">
  const activeName = 'active';
  const defaultPageHash = '#home';
  let firstLogin = [[${firstLogin}]];
  $(function () {
    handleHashChange();
    checkIfFirstLogin(firstLogin);
  });

  /**
   * 检查是否首次登录
   * @param firstLogin true为首次登录，false为非首次登录
   */
  function checkIfFirstLogin(firstLogin) {
    if (firstLogin) {
      let $f = $('#passwordForm');
      $f.find("input[name='newPassword']").val('');
      $f.find("input[name='confirmPassword']").val('');
      $("#formModal").modal({backdrop: 'static', keyboard: false});
      $("#formModal").modal('show');
    }
  }

  function handleHashChange() {
    var hash = location.hash;
    hash = hash ? hash : defaultPageHash
    $('.sidebar-menu a').removeClass(activeName);
    var $href = $('.sidebar-menu > a[href="' + hash + '"]');
    if ($href.length > 0) {
      $href.addClass(activeName).parent().parent().siblings().addClass(activeName).parent().addClass('menu-open');
    }
    Core.load("#content", hash.replace('#', ''));
  }

  /**
   * 打开修改密码的模态框
   */
  function showEditPasswordModal() {
    let $f = $('#passwordForm');
    $f.find("input[name='oldPassword']").val('');
    $f.find("input[name='newPassword']").val('');
    $f.find("input[name='confirmPassword']").val('');
    $("#formModal").modal('show');
  }

  /**
   * 修改密码
   * @param firstLogin 为true时调用forceEditPassword方法，为false时调用editPassword方法
   */
  function changePassword(firstLogin) {
    let $f = $('#passwordForm');
    let valid = $f[0].checkValidity();
    let oldPassword = $f.find("input[name='oldPassword']").val();
    let newPassword = $f.find("input[name='newPassword']").val();
    let confirmPassword = $f.find("input[name='confirmPassword']").val();
    let url = `/auth/${firstLogin ? 'forceEditPassword' : 'editPassword'}`;
    if (valid) {
      let regexp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
      if (!regexp.test(newPassword)) {
        layer.msg("新密码长度为8~20位，需要数字和字母的组合")
        return;
      }
      if (newPassword !== confirmPassword) {
        layer.msg("两次密码输入不一致！")
        return;
      }
      Core.mask("#editPasswordBtn");
      Core.putAjax(url, {
        oldPassword, newPassword
      }, function (res) {
        if (res.code === 1) {
          $("#formModal").modal("hide");
          layer.msg("密码修改成功，请重新登录");
          setTimeout(() => {
            location.href = ctx + 'logout';
          }, 2000);
        } else {
          layer.msg(res.message);
        }
      })
    }
    Core.unmask("#editPasswordBtn");

    $f.addClass("was-validated");

  }
</script>

</body>
</html>